<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0113)https://www.17sucai.com/preview/1/2015-10-20/%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C%E8%A1%A8%E5%8D%95/register.html -->

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>注册界面</title>
<link rel="stylesheet" href="./index_files/style.css">
<script src="./index_files/jquery.min.js"></script>
<style>
	p{
		color: red;
	}
	#moon{
		cursor:pointer;
		background: #c7d2c7;
	}
	#sevenMsg{
		color: blue;
	}
	#submit{
		background:blue;
		cursor:pointer;
	}
	#submit:hover{
		background:#c2dec7;
	}
</style>
<script>

	$(function(){
		$("#look").hide();//隐藏按钮
		$("#username").blur(function(){
			if($("#username").val()==""){
				$("#oneMsg").html("用户名不能为空");
			}else{
				$("#oneMsg").html("");
			}
		})
		$("#password").blur(function(){
			if($("#password").val()==""){
				$("#twoMsg").html("密码不能为空");
			}else{
				$("#twoMsg").html("");
			}
		})
		$("#password1").blur(function(){
			if($("#password1").val()==""){
				$("#threeMsg").html("确认密码不能为空");
			}else{
				if($("#password1").val()!=$("#password").val()){
					$("#threeMsg").html("确认密码错误");
				}else{
					$("#threeMsg").html("");
				}
			}
		})
		$("#phone").blur(function(){
			if($("#phone").val()==""){
				$("#fourMsg").html("电话号码不能为空");
			}else{
				if($("#phone").val().length==11){
					
					$("#fourMsg").html("");
				}else{
					$("#fourMsg").html("电话号码格式错误");
				}
			}
		})
		$("#email").blur(function(){
			var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
			if($("#email").val()==""){
				$("#fiveMsg").html("邮箱不能为空");
				$("#look").hide();
			}else{
				if(reg.test($("#email").val())){
					$("#fiveMsg").html("");
					$("#look").show();//显示按钮
					$("#moon").css({'background-color':'#0bb7a0'});
				}else{
					$("#fiveMsg").html("请输入正确的邮箱格式");
					$("#look").hide();
				}
			}
		})
		$("#yzm").blur(function(){
			if($("#email").val()==""){
				$("#sixMsg").html("验证码不能为空");
			}else{
				$("#sixMsg").html("");
			}
		})
		//点击获取验证码sixMsg
		$("#moon").click(function(){
			var url="../../User/yzm.action";
			var data={email:$("#email").val()};
			$.post(url,data);
			$("#moon").css({'background-color':'#c7d2c7'});
			$("#moon").attr("disabled", true); //按钮失效
			var time=3;
			var c = window.setInterval(function(){
				time=time-1;
				if(time<=0){
					$("#moon").attr("disabled", false);
					$("#moon").css({'background-color':'#0bb7a0'});
					$("#sevenMsg").html("");
					window.clearInterval(c);
				}else{
					$("#sevenMsg").html(time+"秒后重新发送");
				}
				
			},1000);
		})
		
		$("#yzm").blur(function(){
			if($("#yzm").val()==""){
				$("#sixMsg").html("验证码不能为空");
			}else{
				var url="../../User/yzmAdd.action";
				var data={yzm:$("#yzm").val()};
				$.post(url,data,function(obj){
					if(obj.state==1){
						$("#sixMsg").html("");
					}else{
						$("#sixMsg").html("验证码错误");
					}
				})
			}
		})
		$("#submit").click(function(){
			if($("#username").val()!=""&&$("#password").val()!=""&&$("#password1").val()!=""&&$("#email").val()!=""&&$("#phone").val()!=""&&$("#yzm").val()!=""
					&&$("#oneMsg").html()==""&&$("#twoMsg").html()==""&&$("#threeMsg").html()==""&&$("#fourMsg").html()==""&&$("#fiveMsg").html()==""&&$("#sixMsg").html()==""&&$("#sevenMsg").html()==""){
				alert("注册成功");
				window.location.href="index.html";
			}else{
				alert("注册失败");
			}
		})
	})
</script>
</head>
<body>

<div class="register-container">
	<h1>注册界面</h1>
	<form id="registerForm">
		<div>
			<input type="text" name="userName" id="username" placeholder="您的用户名">
			<p id="oneMsg"></p>
		</div>
		<div>
			<input type="password" name="userPwd" id="password" placeholder="输入密码">
			<p id="twoMsg"></p>
		</div>
		<div>
			<input type="password" name="password1" id="password1" placeholder="再次输入密码">
			<p id="threeMsg"></p>
		</div>
		<div>
			<input type="text" name="userPhone" id="phone" placeholder="输入电话号码">
			<p id="fourMsg"></p>
		</div>
		<div>
			<input type="text" name="userEmail" id="email" placeholder="输入邮箱地址">
			<p id="fiveMsg"></p>
			<div id="look"><input type="button" id="moon"  value="获取验证码"></div>
			<p id="sevenMsg"></p>
		</div>
		<div>
			<input type="text" id="yzm"  placeholder="输入验证码">
			<p id="sixMsg"></p>
		</div>
		<input type="button" value="注册" id="submit">
	</form>
	<a href="index.html">
		<button type="button" class="register-tis">已经有账号？</button>
	</a>

</div>
<ul id="supersized" class="quality" style="visibility: visible;"><li class="slide-0 prevslide" style="visibility: visible; opacity: 1;"><a target="_blank"><img src="./reight_files/1.jpg" style="width: 1239px; left: 0px; top: -33.5px; height: 768.18px;"></a></li><li class="slide-1 activeslide" style="visibility: visible; opacity: 1;"><a target="_blank"><img src="./reight_files/2.jpg" style="width: 1239px; left: 0px; top: -83px; height: 867.3px;"></a></li><li class="slide-2" style="visibility: visible; opacity: 1;"><a target="_blank"><img src="./reight_files/3.jpg" style="width: 1239px; height: 780.57px; left: 0px; top: -40px;"></a></li></ul><object id="yhaitaoplugin" type="application/x-npHaitaoPlugin" style="position:absolute;left:-9000px;top:-9000px;" width="0" height="0"></object><a data-cltversion="2.4.26" data-cltsource="60036" data-cltuuid="extgq8qJhj3JS6onBYTqfAtGzvJxVq4lAcj3" data-cltats="4" href="javascript:" id="yht-info-explugin" style="display: none;"></a><div id="qb-sougou-search" style="display: none; opacity: 0;"><p>搜索</p><p class="last-btn">复制</p><iframe src="./reight_files/saved_resource.html"></iframe></div>
</body>
</html>

